import React, {memo, useCallback, useRef, useMemo, useState} from 'react';
import {
  Text,
  View,
  StyleSheet,
  ImageBackground,
  Dimensions,
  Button,
  Animated,
  TouchableWithoutFeedback,
  Easing,
} from 'react-native';
import LazyloadImg from '../../base/LazyloadImg';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

const priceArr = [0.5, 1, 2, 3, 5, 20, 50, 99];
const computedDeg = num => {
  switch (num) {
    case 0.5:
      return 360 * (parseInt(Math.random() * 6) + 6) - 0 * 45;
    case 1:
      return 360 * (parseInt(Math.random() * 6) + 6) - 1 * 45;
    case 2:
      return 360 * (parseInt(Math.random() * 6) + 6) - 2 * 45;
    case 3:
      return 360 * (parseInt(Math.random() * 6) + 6) - 3 * 45;
    case 5:
      return 360 * (parseInt(Math.random() * 6) + 6) - 4 * 45;
    case 20:
      return 360 * (parseInt(Math.random() * 6) + 6) - 5 * 45;
    case 50:
      return 360 * (parseInt(Math.random() * 6) + 6) - 6 * 45;
    case 99:
      return 360 * (parseInt(Math.random() * 6) + 6) - 7 * 45;
    default:
      return 360 * (parseInt(Math.random() * 6) + 6) - 0 * 45;
  }
};
const LotteryPopup = ({onClose}) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const [d, setD] = useState(0);
  const g = useMemo(() => {
    return computedDeg(d);
  }, [d]);
  const lotteryStart = () => {
    // Will change fadeAnim value to 1 in 5 seconds
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 6000,
      useNativeDriver: true,
      // easing: Easing.expIn, // circle exp sin  'easeIn' | 'easeInEaseOut' | 'easeOut' | 'linear' | 'keyboard'  exp 对称
      // easing: Easing.expInOut, // circle exp sin  'easeIn' | 'easeInEaseOut' | 'easeOut' | 'linear' | 'keyboard'  exp 对称
      // easing: Easing.sinOut, // circle exp sin  'easeIn' | 'easeInEaseOut' | 'easeOut' | 'linear' | 'keyboard'  exp 对称
    }).start(() => {
      console.log('ok');
    });
    // }).spring().start();
  };

  const onPressLearnMore = useCallback(() => {
    const num = priceArr[parseInt(Math.random() * 8)];
    setD(num);
    lotteryStart();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const spin = fadeAnim.interpolate({
    inputRange: [0, 1], //输入值
    outputRange: ['0deg', g + 'deg'], //输出值
  });
  return (
    <View style={styles.lotteryPopup}>
      <Animated.View
        style={[
          styles.lotteryBg1,
          {
            transform: [{rotateZ: spin}],
            // transform: [{skewX: 100 + 'deg'}],
            // transform: `skewX(100deg)`,[{translateY}]
            // transform: `skewX( ${fadeAnim}deg)`,
          },
        ]}>
        <ImageBackground
          source={require('./img/lottery-bg2.png')}
          style={styles.image1}
        />
      </Animated.View>
      <View style={styles.lotteryBg1}>
        <ImageBackground
          source={require('./img/lottery-bg.png')}
          style={styles.image1}
        />
      </View>
      <Animated.View
        style={[
          styles.lotteryBg1,
          {
            transform: [{rotateZ: spin}],
            // transform: [{skewX: 100 + 'deg'}],
            // transform: `skewX(100deg)`,[{translateY}]
            // transform: `skewX( ${fadeAnim}deg)`,
          },
        ]}>
        <ImageBackground
          source={require('./img/lottery.png')}
          style={styles.image1}
        />
      </Animated.View>
      <View style={styles.lotteryBg1}>
        <ImageBackground
          source={require('./img/pointer.png')}
          style={styles.image1}
        />
      </View>
      <TouchableWithoutFeedback onPress={onClose}>
        <View style={styles.close}>
          <ImageBackground
            source={require('./img/close.png')}
            style={styles.image1}
          />
        </View>
      </TouchableWithoutFeedback>
      <View style={styles.lotterybtn}>
        <TouchableWithoutFeedback onPress={onPressLearnMore}>
          <Text style={styles.bell}> 抽奖 </Text>
        </TouchableWithoutFeedback>
        {/* <Button
          onPress={onPressLearnMore}
          title="抽奖"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        /> */}
      </View>
    </View>
  );
};
export default memo(LotteryPopup);

const styles = StyleSheet.create({
  close: {
    position: 'absolute',
    width: 30,
    // height: '100%',
    height: 30,
    top: '18%',
    bottom: 0,
    right: 20,
    margin: 'auto',
    zIndex: 999999,
  },
  lotteryPopup: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    zIndex: 99900,
  },
  lotteryBg1: {
    position: 'absolute',
    width: width,
    // height: '100%',
    height: width,
    top: '18%',
    left: 0,
    bottom: 0,
    right: 0,
    margin: 'auto',
    zIndex: 999901,
  },
  image1: {
    width: '100%',
    height: '100%',
  },
  lotterybtn: {
    position: 'absolute',
    width: width,
    // height: '100%',
    height: width,
    top: (width / height) * 100 + 18 + '%',
    left: 0,
    bottom: 0,
    right: 0,
    margin: 'auto',
    zIndex: 999990,
  },
  bell: {
    // width: 140,
    padding: 10,
    paddingLeft: 13,
    paddingRight: 13,
    paddingTop: 16,
    paddingBottom: 16,
    backgroundColor: '#f40',
    borderRadius: 20,
    fontSize: 12,
    fontWeight: 'bold',
    color: '#fff',
  },
});
